<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #can{
            margin: 10px;
            background-color: #000;
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <canvas id="can" width="300px" height="300px">
    </canvas>
    <script>
       window.onload = ()=>{
        const canvas = document.getElementById('can');
        const cxt = canvas.getContext('2d');
        console.log(cxt);
        if(!cxt) return;
       
        function draw()
        {
         //bg
         cxt.save()
         cxt.beginPath();
         cxt.translate(150,150);
         cxt.arc(0,0,145,0,Math.PI*2,false);
         cxt.fillStyle = "white";
         cxt.fill();
         cxt.restore();
 
        
         
        //数字
        cxt.save();
        cxt.translate(150,150);
        cxt.font="16px SimSun"
        cxt.textBaseline = 'middle'
        cxt.textAlign = 'center';
        let nums = [3,4,5,6,7,8,9,10,11,12,1,2];
        for(let i = 0;i<nums.length;i++)
        {
            cxt.fillText(nums[i],Math.cos(Math.PI*2/12*i)*120,Math.sin(Math.PI*2/12*i)*120);
        }
         cxt.restore();
         //时钟刻度
         cxt.save();
         cxt.translate(150,150);
         cxt.lineWidth = 4;
         for(let i = 0;i<=12;i++)
         {
             cxt.rotate(Math.PI*2/12);
             cxt.moveTo(0,-145);
             cxt.lineTo(0,-137);
             cxt.stroke();
        }
         cxt.restore();

         //分钟刻度
         cxt.save();
         cxt.translate(150,150);
         cxt.lineWidth = 1;
         for(let i = 0;i<=60;i++)
         {
            cxt.rotate(Math.PI*2/60);
            cxt.moveTo(0,-145);
            cxt.lineTo(0,-139);
            cxt.stroke();
         }
         cxt.restore();

          //圆心
          cxt.save();
          cxt.translate(150,150);
          cxt.fillStyle = "#000";
          cxt.beginPath();
          cxt.arc(0,0,4,0,Math.PI*2,false);
          cxt.fill();
          cxt.beginPath();
          cxt.strokeStyle = "#999";
          cxt.arc(0,0,8,0,Math.PI*2,false);
          cxt.lineWidth = 6;
          cxt.stroke();
          cxt.restore();

          let time = new Date();
          let hour = time.getHours();
          let minute = time.getMinutes();
          let second = time.getSeconds();
          
          
          //时针
          cxt.save();
          cxt.translate(150,150);
          cxt.beginPath();
          cxt.moveTo(0,0);
          cxt.rotate(hour*Math.PI*2/12+minute*Math.PI*2/12/60+second/12/60/60*Math.PI*2);
          cxt.lineTo(0,-100);
          cxt.lineWidth = 6;
          cxt.strokeStyle = 'red';
          cxt.lineCap = 'round';
          cxt.stroke();
          cxt.restore();
          
        //分针
        cxt.save();
        cxt.translate(150,150);
        cxt.beginPath();
        cxt.moveTo(0,0);
        cxt.rotate(minute*Math.PI*2/12/5+second/60/12/5*Math.PI*2);
        cxt.lineTo(0,-110);
        cxt.lineWidth=4;
        cxt.lineCap='round';
        cxt.stroke();
        cxt.restore();
        
        //秒钟
        cxt.save();
        cxt.translate(150,150);
        cxt.beginPath();
        cxt.moveTo(0,0);
        cxt.rotate(second*Math.PI*2/60);
        cxt.lineTo(0,-120);
        cxt.lineWidth = 2;
        cxt.lineCap = 'round';
        cxt.stroke();
        cxt.restore();

        //获取下一帧
        requestAnimationFrame(draw);
          
        }

        draw();


       }
        


    </script>
</body>
</html>